<template>
	<view class="viewAsText">

		<u-popup :show="sharePopup" mode="bottom" @close="closeShare">
			<share :setUser="user"></share>
		</u-popup>
		<view class="site"></view>
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%;">
		</view>
		<view class="nav">
			<view class="nav-left">
				<view class="nav-left-inc" @click="back"></view>
				<image :src="this.note.profilePicture" class="nav-left-photo" mode=""></image>
				<text class="nav-left-text">{{ this.note.username }}</text>
			</view>
			<view v-show="show_attention" class="nav-right">
				<view class="nav-right-button" @click="attention" v-if="show">关注</view>
				<view class="nav-right-button on" v-else @click="attention">已关注</view>
				<view class="nav-right-inc" @click="showShare"></view>
			</view>
			<view v-show="!show_attention" class="nav-right">
				<view class="nav-right-button kongbai_zhanwei">
				</view>
				<view class="nav-right-more" @click="showShare"></view>
			</view>
		</view>
		<view class="content">
			<u-swiper :list="list1" @change="change" @click="click" :autoplay="false" :indicator="true"
				indicatorActiveColor="#f72647" height="1000rpx" imgMode="aspectFit" bgColor="#fff"
				indicatorInactiveColor="gainsboro"></u-swiper>
			<h1 class="content-h1">{{ this.note.title }}</h1>
			<text class="content_wenzi">{{ this.note.content }}</text>
			<view class="labels">
				<text>#{{ this.note.name }}</text>
			</view>
			<view class="content-time">
				<text>{{ formatDate(note.createdAt) }}</text> <text>{{ this.note.address }}</text> </text>
			</view>
		</view>
		<view class="line">
			<u-line color="#bdbdbd" length="90%"></u-line>
		</view>
		<view class="enshrine">
			<view class="enshrineNum">
				<text>共{{ num }}评论</text>
			</view>
			<view class="enshrine-photo">
				<view class="enshrine-photo-left">
					<image :src="this.note.profilePicture" class="nav-left-photo" mode="" v-if="mediaType"></image>
					<video :src="item.url" :controls="false" autoplay :show-center-play-btn="false" object-fit="cover"
						v-else></video>
				</view>
				<view class="enshrine-photo-right">
					<view class="enshrine-photo-right-wenben">
						<text class="wenben" @click="showKeyboard">让大家听听你的声音</text>
					</view>
					<view class="enshrine-photo-right-icn">
						<text class="fuhao juli"></text>
						<text class="ic juli"></text>
						<text class="tup juli"></text>
					</view>
				</view>
			</view>
			<view class="enshrineContent" v-for="(item, index) in remark" :key="index">
				<view class="enshrineContent-photo">
					<image :src="item.profilePicture" class="nav-left-photo" mode=""></image>
				</view>
				<view class="enshrineContent-text">
					<text class="name ">{{ item.username }}</text>
					<view class="enshrineContent-text-word">
						<text class="comment">{{ item.content }}</text>
						<text class="date">{{ formattedTime = formatTimeAgo(item.createdTime) }} </text>
						<text class="huifu" @click="huifu(item)">
							<span>回复</span>
						</text>
					</view>
					<u-popup :show="dialogVisible" overlayOpacity="0.1" mode="bottom" @close="dialogVisible = false"
						custom-class="custom-popup">
						<view class="popup-content">
							<u-input style="border-radius: 30rpx; background: #e3e3e3;" type="textarea"
								v-model="replyContent" :placeholder="huifuText" :height="200"></u-input>
							<view class="button-group">
								<span :class="{ 'show': replyContent.trim().length > 0}"
									@click="submitReply()">发布</span>
							</view>
						</view>
					</u-popup>
					<view v-show="item.expanded" v-for="(onreview, index) in item.replies" :key="index"
						class="enshrineContent-review-son">
						<view class="enshrineContent-review-son-photo ">
							<image :src="onreview.profilePicture" class="nav-left-photo " />
							<text class="name name_son">{{ onreview.username }}</text>
						</view>
						<view class="enshrineContent-text-word">
							<text class="comment comment_son">{{ onreview.content }}</text>
							<text class="date date_son">{{ formattedTime = formatTimeAgo(onreview.createdAt) }}</text>
							<text class="huifu huifu_son" @click="huifu(onreview)">
								<span>回复</span>
							</text>
						</view>
						<u-popup :show="dialogVisible" overlayOpacity="0.1" mode="bottom" @close="dialogVisible = false"
							custom-class="custom-popup">
							<view class="popup-content">
								<u-input type="textarea" v-model="replyContent" :placeholder="huifuText"
									:height="200"></u-input>
								<view class="button-group">
									<span :class="{ 'show': replyContent.trim().length > 0} "
										@click="submitReply()">发布</span>
								</view>
							</view>
						</u-popup>
					</view>
					<view class="zankai" @click="toggleExpand(item)" v-show="item.replies && item.replies.length > 0">
						<span style="color: #2367c7;">{{ item.expanded ==false? '展开更多回复' : '收起回复' }}</span>
					</view>
				</view>
			</view>
			<u-loadmore v-show="loadStatus" :status="status" :icon="true" />
			<view class="bottom_box" v-show="this.displaybottom">
				{{bottom_box_content}}
			</view>
			<view class="kongbai">

			</view>
		</view>
		<view class="bottom">
			<view class="bottom-left">
				<view class="enshrine-photo-right kuan">
					<view class="enshrine-photo-right-wenben">
						<input type="text" placeholder="请输入内容" v-model="value" ref="myInput" />
					</view>
				</view>
			</view>
			<view class="bottom-right">
				<view class="fas" @click="publish">发送</view>
				<text class="bai-aixin" @click="link" v-if="love"></text>
				<text class="hong-aixin" @click="link" v-else></text>
				<text>{{ note.likeNum }}</text>
				<text class="bai-enshrine" @click="collect" v-if="enshrine"></text>
				<text class="huang-enshrine" @click="collect" v-else></text>
				<text>{{ note.collectNum }}</text>
				<text class="pinlun"></text>
				<text>{{ num }}</text>
			</view>
		</view>
	</view>
</template>
<script>
	import share from '@/pages/My/components/share.vue'
	export default {
		data() {
			return {
				sharePopup: false,
				dialogVisible: false,
				show_attention: true,
				show: true,
				love: true,
				enshrine: true,
				value: "",
				unfold: false,
				status: 'loadmore',
				loadStatus: true,
				review: [],
				bottom_box_content: '',
				displaybottom: false,
				dialogVisible: false,
				replyContent: '',
				reviewId: null, // 用于存储当前回复的评价ID
				huifuText: '',
				post: {
					postId: null,
					userId: null,
					postUserId: null
				},
				userId: null,
				note: {},
				remark: [

				],
				 user: null, // 或者初始化为适当的值
				review: [],
				list1: [],
				prefixIconStyle: {
					fontSize: "45rpx"
				},
				mediaType: null,
				num: null,
				page: 1, //页数
				size: 8, //每页条数
				total: 0 //数据总条数
			}
		},
		onReachBottom() {
			//页数加加
			this.page++,
				//再次回调查看评价内容
				this.getComments();
		},
		onLoad(e) {
			console.log(e);
			this.post.postId = Number(e.postId)
			this.mediaType = e.mediaType
			this.post.userId = uni.getStorageSync("id")
			this.post.postUserId = Number(e.followeeId)
			this.getPosts();
			this.getComments();
			console.log(this.post.postUserId + "----" + uni.getStorageSync("id"));
			if (this.post.postUserId == uni.getStorageSync("id")) {
				console.log(this.post.postUserId + "----" + uni.getStorageSync("id"));
				this.show_attention = false;
			}

		},
		onPullDownRefresh() {
			this.remark = [];
			this.page = 1;
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止页面加载动画
			}, 1000);
			this.post.postId = Number(e.postId);
			this.mediaType = e.mediaType;
			this.post.userId = uni.getStorageSync("id");
			this.post.postUserId = Number(e.followeeId);
			this.getPosts();
			this.getComments();
			this.getFollow();
			this.request("/posts/getposts", "post", {
				userId: this.post.userId,
				postId: this.post.postId,
				followeeId: this.post.postUserId
			}).then(
				(res) => {
					this.note = res.data.result;
					this.list1.length = 0;
					this.list1.push(res.data.result.url);
					if (res.data.result.like == true) {
						this.love = false;
						this.note.likeNum = this.note.likeNum;
					}
					if (res.data.result.collect == true) {
						this.enshrine = false;
						this.note.collectNum = this.note.collectNum;
					}
					if (res.data.result.follow == true) {
						this.show = false;
					}
				}).catch((err) => {
				console.log(err);
			});
			this.request("/posts/getcomments", "get", {
				postId: this.post.postId
			}).then(
				(res) => {
					this.remark = res.data.result
				}
			).catch((err) => {
				console.log();
			});
			this.request("/posts/getcommentscount", "get", {
				postId: this.post.postId
			}).then(
				(res) => {
					console.log(res);
					this.num = res.data.result
				}
			).catch((err) => {
				console.log();
			});
			this.request(`/api/follow/getFollowees?follower=${this.post.userId}&followeeId=${this.post.postUserId}`,
				"post").then(
				(res) => {
					console.log(res.data.message);
					if (res.data.message === "true") {
						this.show = false;
					}
				}
			)

		},
		components: {
			share
		},
		methods: {
			
			
			closeShare() {
				this.sharePopup = !this.sharePopup
			},
			getComments() {
				this.request(`/posts/getcomments?postId=${this.post.postId}&page=${this.page}&size=${this.size}`, "get")
					.then(
						(res) => {
							if (res.data.code == 200) {
								this.remark = this.remark.concat(res.data.result.list)
								console.log(res.data.result);
							} else {
								this.displaybottom = true;
								this.loadStatus = false;
								this.bottom_box_content = res.data.message;
							}
						}
					).catch((err) => {
						console.log();
					});
				this.request("/posts/getcommentscount", "get", {
					postId: this.post.postId
				}).then(
					(res) => {
						if (res.data.code == 200) {
							console.log(res);
							this.num = res.data.result
						}
					}
				).catch((err) => {
					console.log();
				});
			},
			getFollow() {
				this.request(`/api/follow/followers?follower=${this.post.userId}&followeeId=${this.post.postUserId}`,
					"post").then((res) => {
					console.log(res.data.message);
					if (res.data.message === "true") {
						this.show = false;
					}
				}).catch(res => {
					console.log(res);
				})
			},
			getPosts() {
				this.request("/posts/getposts", "post", {
					userId: this.post.userId,
					postId: this.post.postId,
					followeeId: this.post.postUserId
				}).then(
					(res) => {
						if (res.data.code == 200) {
							this.note = res.data.result;
							this.list1.length = 0;
							this.list1.push(res.data.result.url);
							if (res.data.result.like == true) {
								this.love = false;
								this.note.likeNum = this.note.likeNum;
							}
							if (res.data.result.collect == true) {
								this.enshrine = false;
								this.note.collectNum = this.note.collectNum;
							}
							if (res.data.result.follow == true) {
								this.show = false;
							}
						}

					}).catch((err) => {
					console.log(err);
				});
			},
			showShare() {
				this.sharePopup = !this.sharePopup
			},
			attention() {
				this.userId = uni.getStorageSync('id');
				if (this.show == true) {
					this.request(`/api/follow/follow?follower=${this.userId}&followeeId=${this.note.userId}`, "post")
						.then((res) => {
							console.log(res);
							this.show = !this.show;
						}).catch((err) => {
							console.log(err);
						});
				} else if (this.show == false) {
					this.request(`/api/follow/unfollow?follower=${this.userId}&followeeId=${this.note.userId}`, "post")
						.then((res) => {
							console.log(res);
							this.show = !this.show;
						}).catch((err) => {
							console.log(err);
						});
				}
			},
			link() {
				this.love = !this.love;
				if (this.love == false) {
					this.request(`/like/goLike?postId=${this.post.postId}&userId=${uni.getStorageSync("id")}`, "post")
						.then((res) => {
							console.log(res);
							this.note.likeNum++;
						}).catch((err) => {
							console.log(err);
						});

				} else if (this.love == true) {
					this.request(`/like/delLike?postId=${this.post.postId}&userId=${uni.getStorageSync("id")}`, "delete")
						.then((res) => {
							console.log(res);
							this.note.likeNum--;
						}).catch((err) => {
							console.log(err);
						});

				}
			},
			getReviewText(rating) {
				switch (rating) {
					case 0:
						return '。。';
					case 1:
						return '差评';
					case 2:
						return '就这';
					case 3:
						return '一般';
					case 4:
						return '还行';
					case 5:
						return '超赞';
					default:
						return '无';
				}
			},
			huifu(review) {
				this.huifuText = "回复" + review.username
				//this.reviewId = reviewId;
				this.dialogVisible = true;
				this.review = review;
			},
			async submitReply() {
				if (!this.replyContent.trim()) {
					uni.showToast({
						title: '回复内容不能为空',
						icon: 'none'
					});
					return;
				}
				await this.request("/comment/insertcomment", "post", {
					parentCommentId: this.review.commentId,
					postId: this.note.postId,
					userId: uni.getStorageSync("id"),
					content: this.replyContent
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res);
						this.page = 1;
						this.getPosts();
						this.getComments();
						setTimeout(() => {
							this.$router.go(0)
						}, 10)
						this.dialogVisible = false;
						this.replyContent = '';
						uni.showToast({
							title: '回复成功',
							icon: 'success'
						});

					}
					this.getComments();
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '回复失败',
						icon: 'none'
					});
				})
			},
			collect() {
				this.enshrine = !this.enshrine;
				if (this.enshrine == false) {
					this.request(`/api/collections/collect?postId=${this.post.postId}&userId=${uni.getStorageSync("id")}`,
							"post")
						.then((res) => {
							console.log(res);
							this.note.collectNum++;
						}).catch((err) => {
							console.log(err);
						});

				} else if (this.enshrine == true) {
					this.request(
							`/api/collections/uncollect?postId=${this.post.postId}&userId=${uni.getStorageSync("id")}`,
							"post")
						.then((res) => {
							console.log(res);
							this.note.collectNum--;
						}).catch((err) => {
							console.log(err);
						});

				}
			}, //解析时间
			formatTimeAgo(timeString) {
				// 解析从后端获取的时间字符串
				const receivedTime = new Date(timeString);
				// 获取当前时间
				const currentTime = new Date();
				// 计算时间差（以毫秒为单位）
				const timeDiff = currentTime - receivedTime;
				// 将时间差转换为秒、分钟、小时和天
				const seconds = Math.floor(timeDiff / 1000);
				const minutes = Math.floor(seconds / 60);
				const hours = Math.floor(minutes / 60);
				const days = Math.floor(hours / 24);
				// 根据时间差返回不同的格式
				if (days > 0) {
					// 如果时间差超过7天，显示月-日格式
					if (days >= 7) {
						return receivedTime.toLocaleDateString('zh-CN', {
							month: '2-digit',
							day: '2-digit'
						});
					} else {
						// 如果时间差在7天以内，显示“几天前”格式
						return `${days}天前`;
					}
				} else if (hours > 0) {
					// 如果时间差在一天以内但超过2小时，显示“几小时前”格式
					return `${hours}小时前`;
				} else if (minutes > 0) {
					// 如果时间差在2小时以内但超过1分钟，显示“几分钟前”格式
					return `${minutes}分钟前`;
				} else {
					// 如果时间差在1分钟以内，显示“刚刚”或其他适当的内容
					return '刚刚';
				}
			},
			publish() {
				this.request("/comment/insertcomment", "post", {
					postId: this.note.postId,
					userId: uni.getStorageSync("id"),
					content: this.value
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res);
						this.value = "";
						this.page = 1;
						uni.showToast({
							title: '发布成功',
							icon: 'success'
						});
					}
					this.getComments();
				}).catch(err => {
					console.log(err);
				})

			},
			//切换他的一个状态
			toggleExpand(review) {
				review.expanded = !review.expanded;
			},
			formatDate(dateString) {
				if (dateString) {
					return dateString.slice(0, 10);
				}
				return '时间';
			},


			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			open() {
				if (this.remarkShow < this.remark.replies.length - 1) {
					this.remarkShow++;
				}
			},
			showKeyboard() {
				uni.showKeyboard({
					success: function() {
						console.log('键盘已显示');
					},
					fail: function(err) {
						console.error('键盘显示失败：', err);
					}
				})
			}
		}
	}
</script>
<style scoped>
	.name {
		margin-left: 10px;
		color: #898989;
	}

	.popup-content {
		padding: 16px;
	}

	.photo_son {
		width: 50rpx;
	}

	.review_son {
		margin-left: 50rpx;
		border-bottom: none;
	}

	.date_son {
		width: 58rpx;
	}

	.name_son {
		width: 220rpx;
	}

	.bottom_box {
		height: 1rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 40rpx;
		color: #ddd;
		margin-bottom: 100rpx;
	}

	.date {
		color: #999;
		font-size: 28rpx;
		margin-left: 8rpx;
		margin-top: 5rpx;
	}

	.huifu {
		color: #878787;
		font-size: 30rpx;
		margin-top: rpx;
		margin-left: 8rpx;
	}

	.button-group {
		position: relative;
		margin-top: rpx;
		transition: margin-left 0.3s;
	}

	.button-group span {
		display: block;
		background-color: red;
		border-radius: 30rpx;
		width: 150rpx;
		height: 65rpx;
		line-height: 65rpx;
		text-align: center;
		margin-top: -68rpx;
		font-size: 40rpx;
		color: #fff;
		opacity: 0;
		transition: opacity 0.3s, right 0.3s;
		position: absolute;
		right: -150rpx;
		/* 初始位置 */
	}

	.zankai {
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.button-group span.show {
		opacity: 1;
		right: 1px;
		/* 输入框右侧的距离 */
	}

	.unfold {
		color: #2e639c;
	}

	.enshrineContent-photo {
		margin: 0 30rpx;
	}

	.enshrineContent {
		display: flex;
		align-items: flex-start;
		margin-top: 20px;
	}

	.enshrineContent-text {
		width: 545rpx;
		display: flex;
		flex-direction: column;

	}


	.enshrineContent-text-word {
		display: flex;
		flex-wrap: wrap;
		margin-top: 7px;
		margin-left: 2px;
		align-items: center;
		justify-content: flex-start;

	}

	.enshrineContent-review-son {
		width: 545rpx;
		/* display: flex;
		flex-wrap: wrap;
		justify-content: flex-start; */
		/* align-content: center; */
	}

	.enshrineContent-review-son-photo {
		width: 300rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin-top: 32rpx;
	}

	/* .enshrineContent-text-word-1 {
		width: 200rpx;
		word-break: break-all;
	} */

	.site {
		width: 100%;
		height: 120rpx;
	}

	.nav {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-evenly;
		background-color: white;
		position: fixed;
		top: 0;
		z-index: 200;
	}

	.nav-left {
		width: 50%;
		height: 100%;
		margin-left: -50rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.nav-left-inc::before {
		font-family: "iconfont" !important;
		content: "\e64e";
		font-size: 60rpx;
	}
    .nav-right-more::before{
		font-family: "iconfont" !important;
		content: "\e606";
		font-size: 60rpx;
	}
	.kongbai {
		height: 100rpx;
	}

	.nav-left-photo {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}

	.nav-left-text {
		font-size: 35rpx;
	}

	.nav-right {
		width: 40%;
		height: 100%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.nav-right-button {
		width: 50%;
		height: 50%;
		background-color: #fff;
		color: #ff2442;
		border: 1px solid #ff2442;
		border-radius: 32rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 58rpx;
	}

	.kongbai_zhanwei {
		border: none;
	}

	.on {
		border-color: gainsboro;
		color: gainsboro;
	}

	.nav-right-inc::before {
		font-family: "iconfont" !important;
		content: "\e624";
		font-size: 50rpx;
	}

	.comment {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin-left: 15rpx;
		align-content: flex-start;
		justify-content: space-around;


	}

	.content-h1 {
		font-size: 40rpx;
		text-align: left;
		margin-left: 30rpx;
	}

	.content_wenzi {
		text-align: left;
		margin-left: 30rpx;
	}

	.labels {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		color: #2e639c;
		margin: 8rpx 0;
		margin-left: 30rpx;
	}

	.content-time {
		text-align: left;
		margin-left: 30rpx;
	}

	.line {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
	}

	.bottom {
		margin-top: 200rpx;
		width: 100%;
		height: 90rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		z-index: 200;
		display: flex;
		justify-content: space-evenly;
	}

	.bottom-left-input {
		background-color: #f4f4f4;
	}

	.bottom-right {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.bai-aixin::before {
		font-family: "iconfont" !important;
		content: "\e8ab";
		font-size: 60rpx;
	}

	.hong-aixin::before {
		font-family: "iconfont" !important;
		content: "\e85c";
		color: #ff2442;
		font-size: 60rpx;
	}

	.bai-enshrine::before {
		font-family: "iconfont" !important;
		content: "\e8b9";
		font-size: 60rpx;
	}

	.huang-enshrine::before {
		font-family: "iconfont" !important;
		content: "\e8c6";
		font-size: 60rpx;
		color: #ffc107;
	}

	.pinlun::before {
		font-family: "iconfont" !important;
		content: "\e60a";
		font-size: 60rpx;
	}

	.enshrine {
		margin: 50rpx 20rpx;
		display: flex;
		flex-direction: column;
	}

	.enshrine-photo {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.enshrine-photo-right {
		width: 80%;
		height: 80rpx;
		border-radius: 36rpx;
		text-indent: 2rem;
		background-color: #f4f4f4;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		color: #b4b4b4;
	}

	.fuhao::after {
		font-family: "iconfont" !important;
		content: "\e704";
		font-size: 55rpx;
	}

	.ic::after {
		font-family: "iconfont" !important;
		content: "\e63f";
		font-size: 55rpx;
	}

	.tup::before {
		font-family: "iconfont" !important;
		content: "\e8ba";
		font-size: 55rpx;
	}

	.juli {
		margin-left: 20rpx;
	}

	.enshrine-photo-right-icn {
		text-indent: 0;
	}
</style>